<template>
  <div id="Customer">
    <el-form :inline="true">
      <el-form-item>
        <el-button @click="addCustomer" type="primary" size="mini" icon="el-icon-plus">添加用户</el-button>
      </el-form-item>
    </el-form>
    <vxe-table
      ref="xTable"
      stripe
      border
      :data="userList"
      :edit-config="{trigger: 'manual', mode: 'row'}"
      @edit-closed="editClosedEvent"
    >
      <vxe-table-column title="用户名" field="username" align="center"
                        :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>
      <vxe-table-column title="生日" field="birth" align="center" :edit-render="{}" width="180">
        <template #edit="{row}">
          <el-date-picker
            v-model="row.birth"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </template>
      </vxe-table-column>
      <vxe-table-column title="密码" field="userPassword" align="center" :edit-render="{}">
        <template #edit="{row}">
          <el-input v-model="row.userPassword"></el-input>
        </template>
      </vxe-table-column>
      <vxe-table-column title="所在城市" field="city" align="center" :edit-render="{}">
        <template #edit="{row}">
          <el-input v-model="row.city"></el-input>
        </template>
      </vxe-table-column>
      <vxe-table-column title="注册时间" field="createTime" align="center" sortable
                        :formatter="formatDate"></vxe-table-column>
      <vxe-table-column title="操作" align="center" width="200">
        <template v-slot="{row}">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateCustomer(row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteCustomer(row)">删除</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import {deleteUser, listUser, updateUser} from "@/api/user";
import dayjs from "dayjs";

export default {
  name: "Customer",
  mounted() {
    this.getData()
  },
  data() {
    return {
      userList: []
    }
  },
  methods: {
    getData() {
      listUser().then(res => {
        this.userList = res.data.list
      })
    },
    formatDate(row) {
      return dayjs(row.createTime).format('YYYY-MM-DD')
    },
    addCustomer() {
      this.$router.push('/admin/Customer/add')
    },
    updateCustomer(row) {
      this.$refs.xTable.setActiveRow(row)
    },
    editClosedEvent({row, column}) {
      console.log(row)
      console.log(column)
      delete row._XID
      updateUser(row).then(res => {
        if (res.resultCode === 200) {
          this.$message.success('操作成功')
          this.getData()
        }
      })
    },
    deleteCustomer(row) {
      deleteUser({
        id: row.id
      }).then(res => {
        if (res.resultCode === 200) {
          this.$message.success('操作成功')
          this.getData()
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
#Customer {
  width: 100%;
  margin: 10px;
}
</style>
